import { useEffect, useRef } from "react";
import {
    ArcRotateCamera, Color4, Engine, HemisphericLight, Mesh, MeshBuilder, Plane, Scene, StandardMaterial, Vector3, Color3, ShadowLight, SpotLight, Texture, UniversalCamera, FollowCamera, FlyCamera,
} from '@babylonjs/core';


const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


const engine = new Engine(canvas, true);
const scene = new Scene(engine);

//第三人称
// const camera = new ArcRotateCamera('Camera', Math.PI / 3, Math.PI / 3, 9, new Vector3(0, 0, 0), scene);
// camera.attachControl(canvas, true);
// //camera.lockedTarget = sphere;//设置跟随
// camera.upperRadiusLimit = 50; //距离限制
// camera.lowerRadiusLimit = 10;
// camera.upperBetaLimit = Math.PI / 6 * 5;//上下旋转限制
// camera.lowerBetaLimit = Math.PI / 6;

//第一人称
// const camera = new UniversalCamera('Camera', new Vector3(5, 5, 5), scene);
// camera.setTarget(new Vector3());
// camera.attachControl(canvas, true);
// //camera.lockedTarget = sphere;//设置跟随后attachControl函数不在有用,并且只有视线跟随,position是不动的

//跟随相机
// const camera = new FollowCamera('Camera', new Vector3(0, 10, 10), scene);
// camera.radius = 10;//距离目标的距离
// camera.heightOffset = 10;//目标上方向的偏移
// camera.rotationOffset = 0;//水平面角度的偏移
// camera.cameraAcceleration = 0.005;//靠接目标的加速度
// camera.maxCameraSpeed = 10;//最大速度
// // camera.attachControl(true);//有点问题,移动跟选择有点不受操控
// // camera.lockedTarget = sphere;//设置跟随


//飞行模拟相机(旋转时会有偏移效果)
var camera = new FlyCamera("FlyCamera", new Vector3(0, 5, -10), scene);
camera.rollCorrect = 100;
camera.bankedTurn = true;
camera.bankedTurnLimit = Math.PI / 2;
camera.bankedTurnMultiplier = 1;
camera.attachControl(true);


const light = new HemisphericLight('pxg', new Vector3(1, 1, 0), scene);
const ground = MeshBuilder.CreateGround('ground', { width: 10, height: 10, updatable: true }, scene);
const updateAction: ((time: number) => {})[] = [];


scene.ambientColor = new Color3(1, 1, 1);
const mat = new StandardMaterial('myMat', scene);
mat.diffuseColor = new Color3(1, 1, 1);
mat.specularColor = new Color3(0, 0, 0);
mat.ambientColor = new Color3(1, 1, 1);
mat.ambientTexture = new Texture('../image/image01.png', scene);

mat.wireframe = true;

const sphere = MeshBuilder.CreateSphere('sphere', { segments: 10, diameter: 3 }, scene);

sphere.position.set(0, 2, 0);
sphere.material = mat;


updateAction.push((time: number) => {



    sphere.position.y = 2.5 + Math.sin(time / 200);
    sphere.position.x = 2.5 + Math.sin(time / 200);

    return '';
});



const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(canvas);
            ani(0);
        }
    }, []);
    return (
        <div ref={divRef}></div>
    );
};

export default RenderStructure;

function ani(time: number) {
    updateAction.forEach((action) => {
        action(time);
    })
    scene.render();

    requestAnimationFrame(ani);
}